<template>
    <div class="home">
        <!-- 英雄区域 -->
        <section class="hero" ref="heroSection" @mousemove="handleMouseMove">
            <div class="hero-content">
                <h1 class="animated-title" ref="title">
                    <span class="word">探索</span>
                    <span class="word">世界</span>
                    <span class="word">的美丽</span>
                </h1>
                <div class="slogan-container" ref="slogan">
                    <p class="brand-slogan">「旅刻，让每一刻都被铭记」</p>
                    <div class="slogan-decoration"></div>
                </div>

                <!-- 优化后的开始探索按钮 -->
                
            <button class="cta-button" @mouseenter="startButtonHover" @mouseleave="stopButtonHover" @click="goToRecommend">
                <span class="button-text">开始探索</span>
                <span class="button-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2"
                            stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                </span>
                <span class="button-effect"></span>
            </button>
                
                
            </div>

            <div class="scroll-indicator" @click="scrollToContent">
                <span></span>
            </div>
            <div class="hero-particles" ref="particles"></div>
            <div class="floating-dots" v-for="i in 15" :key="i" :style="getDotStyle()"></div>
        </section>
    </div>
</template>

<script>

export default {
    name: 'appHome',

    methods: {
        scrollToContent() {
            this.$refs.contentSection.scrollIntoView({ behavior: 'smooth' });
        },
        scrollDestinations(direction) {
            const grid = this.$refs.destinationsGrid;
            grid.scrollBy({ left: direction * 300, behavior: 'smooth' });
        },
        handleMouseMove(e) {
            const heroRect = this.$refs.heroSection.getBoundingClientRect();
            const x = e.clientX - heroRect.left;
            const y = e.clientY - heroRect.top;
            const centerX = heroRect.width / 2;
            const centerY = heroRect.height / 2;

            const relX = (x - centerX) / centerX;
            const relY = (y - centerY) / centerY;

            // 标题动画
            const titleWords = this.$refs.title.querySelectorAll('.word');
            titleWords.forEach((word, index) => {
                const delay = index * 0.1;
                const xOffset = relX * (20 + index * 5);
                const yOffset = relY * (20 + index * 5);
                word.style.transform = `translate3d(${xOffset}px, ${yOffset}px, 0)`;
                word.style.transition = `transform ${0.3 + delay}s ease-out`;
            });

            // 标语动画
            const sloganX = relX * 30;
            const sloganY = relY * 30;
            this.$refs.slogan.style.transform = `translate3d(${sloganX}px, ${sloganY}px, 0) rotate(${relX * 2}deg)`;

            // 粒子效果
            this.$refs.particles.style.transform = `translate3d(${x}px, ${y}px, 0) scale(${1 + Math.abs(relX)})`;
        },
        getDotStyle() {
            const size = Math.random() * 6 + 2;
            const posX = Math.random() * 100;
            const posY = Math.random() * 100;
            const opacity = Math.random() * 0.5 + 0.1;
            const animationDuration = Math.random() * 20 + 10;
            const animationDelay = Math.random() * 5;

            return {
                width: `${size}px`,
                height: `${size}px`,
                left: `${posX}%`,
                top: `${posY}%`,
                opacity: opacity,
                animationDuration: `${animationDuration}s`,
                animationDelay: `${animationDelay}s`,
                background: `hsl(${Math.random() * 60 + 180}, 70%, 70%)`
            };
        },
        startButtonHover() {
            this.$refs.particles.style.opacity = '0.8';
            this.$refs.particles.style.transform = 'scale(1.2)';
        },
        stopButtonHover() {
            this.$refs.particles.style.opacity = '0.4';
            this.$refs.particles.style.transform = 'scale(1)';
        },
        goToRecommend(){
            this.$router.push('/recommend/popularDestinations')
        }
    }
}
</script>

<style scoped>
    /* 基础样式 */
    :root {
        --primary-color: #4a6bff;
        --secondary-color: #ff7e5f;
        --dark-color: #2d3436;
        --light-color: #f5f6fa;
        --text-color: #636e72;
        --white: #ffffff;
        --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        --border-radius: 12px;
        --transition: all 0.3s ease;
    }

    .home {
        overflow: hidden;
    }

    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .section {
        padding: 80px 0;
    }

    .section-title {
        text-align: center;
        margin-bottom: 40px;
        font-size: 2.2rem;
        color: var(--dark-color);
        position: relative;
    }

    .section-title::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    }

    /* 英雄区域增强样式 */
    .hero {
        height: 100vh;
        min-height: 800px;
        background:
            linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
            url('@/assets/hero-bg.jpg') no-repeat center center/cover;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: var(--white);
        position: relative;
        overflow: hidden;
        perspective: 1000px;
    }

    .hero-content {
        max-width: 800px;
        padding: 0 20px;
        position: relative;
        z-index: 2;
        transform-style: preserve-3d;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* 动画标题 */
    .animated-title {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        font-size: 4rem;
        margin-bottom: 30px;
        font-weight: 800;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        will-change: transform;
        line-height: 1.2;
    }

    .animated-title .word {
        display: inline-block;
        transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        background: linear-gradient(45deg, #fef54f, #00fe94);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        padding: 0 8px;
    }

    /* 标语容器 */
    .slogan-container {
        position: relative;
        display: inline-block;
        margin-bottom: 50px;
        transition: transform 0.3s ease-out;
        will-change: transform;
    }

    .brand-slogan {
        font-size: 1.8rem;
        position: relative;
        display: inline-block;
        padding: 15px 30px;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 50px;
        backdrop-filter: blur(10px);
        z-index: 2;
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        font-weight: 500;
    }

    .slogan-decoration {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50px;
        background: linear-gradient(45deg,
                rgba(74, 107, 255, 0.4) 0%,
                rgba(255, 126, 95, 0.4) 100%);
        z-index: 1;
        animation: sloganGlow 6s infinite alternate;
    }

    @keyframes sloganGlow {
        0% {
            opacity: 0.6;
            filter: blur(5px);
        }

        100% {
            opacity: 0.9;
            filter: blur(10px);
        }
    }

    /* 开始探索按钮 */
    .cta-button {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 16px 40px;
        background: var(--primary-color);
        color: var(--white);
        border: none;
        border-radius: 50px;
        font-size: 1.2rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        overflow: hidden;
        z-index: 1;
        box-shadow: 0 4px 20px rgba(74, 107, 255, 0.4);
        margin-top: 20px;
    }

    .cta-button:hover {
        background: #3ab0ef;
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(74, 140, 255, 0.6);
    }

    .cta-button:active {
        transform: translateY(0);
    }

    .button-text {
        position: relative;
        z-index: 2;
        transition: transform 0.3s ease;
    }

    .button-icon {
        position: relative;
        z-index: 2;
        margin-left: 12px;
        transition: transform 0.3s ease;
    }

    .cta-button:hover .button-icon {
        transform: translateX(5px);
    }

    .button-effect {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(45deg, #33ccfe, #5e8cff);
        z-index: 1;
        border-radius: 50px;
        transform: scale(0);
        opacity: 0;
        transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .cta-button:hover .button-effect {
        transform: scale(1);
        opacity: 1;
    }

    /* 滚动指示器 */
    .scroll-indicator {
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        width: 30px;
        height: 50px;
        cursor: pointer;
    }

    .scroll-indicator span {
        position: absolute;
        top: 0;
        left: 50%;
        width: 2px;
        height: 30px;
        background: var(--white);
        transform: translateX(-50%);
        animation: scrollIndicator 2s infinite;
    }

    @keyframes scrollIndicator {
        0% {
            transform: translateY(0) translateX(-50%);
            opacity: 1;
        }

        100% {
            transform: translateY(20px) translateX(-50%);
            opacity: 0;
        }
    }

    /* 粒子效果 */
    .hero-particles {
        position: absolute;
        width: 200px;
        height: 200px;
        background: radial-gradient(circle,
                rgba(255, 255, 255, 0.8) 0%,
                rgba(74, 107, 255, 0.4) 70%,
                transparent 100%);
        border-radius: 50%;
        opacity: 0.4;
        pointer-events: none;
        transform: translate(-50%, -50%);
        transition: transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
        z-index: 1;
        filter: blur(10px);
    }

    /* 浮动点效果 */
    .floating-dots {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        animation: float ease-in-out infinite;
        z-index: 1;
    }

    @keyframes float {

        0%,
        100% {
            transform: translateY(0) translateX(0);
        }

        50% {
            transform: translateY(-20px) translateX(10px);
        }
    }

    /* 响应式调整 */
    @media (max-width: 768px) {
        .hero {
            min-height: 700px;
        }

        .animated-title {
            font-size: 2.8rem;
            flex-direction: column;
            gap: 5px;
        }

        .animated-title .word {
            padding: 0;
        }

        .brand-slogan {
            font-size: 1.4rem;
            padding: 12px 24px;
        }

        .cta-button {
            padding: 14px 32px;
            font-size: 1.1rem;
        }
    }

</style>